<template>
    <!-- 登录页面 -->
  <div class="box" :style="backgroundDiv">
      <div class="loginDengLu">
        <div class="boxCentre">
          <div class="imgDiv">
            <img class="img" src="../assets/logo2 (1).png">
          </div>
          <div class="boxBosom">
            <el-form :model="userForm" :rules="rules" ref="userForm">
              <div class="boxBosom_box">
                <div class="boxBosom_box_box01"><p>用户名</p></div>
                <div class="boxBosom_box_box02">
                  <el-form-item  prop="loginName">
                    <el-input v-model="userForm.loginName"> </el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="boxBosom_box">
                <div class="boxBosom_box_box03"><p>密码</p></div>
                <div class="boxBosom_box_box04">
                  <el-form-item  prop="password">
                    <el-input v-model="userForm.password" type="password"> </el-input>
                  </el-form-item>
                </div>
              </div>
              <div style="margin: 0 auto;width:150px" >
                <el-button type="primary" @click="userBackDengLu()">登录</el-button>
                <el-button  @click="resetForm('userForm')" style="margin-left: 5px;">重置</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 用户表单（登录） 登录名，登录密码
      userForm: {
        loginName: '',
        password: ''
      },
      // 表单规则登录名，密码不为空，不超过二十位
      rules: {
        loginName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 0, max: 20, message: '账号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 0, max: 20, message: '密码不能为空', trigger: 'blur' }
        ]
      },
      // 背景图属性
      backgroundDiv: {
        height: ('100%'),
        // backgroundColor: ('rgb(127,255,212)'),
        backgroundImage: 'url(' + require('@/assets/headBackBlue.jpeg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      }
    }
  },
  methods: {
    // 后台登录
    userBackDengLu () {
      if (this.userForm.loginName === '' && this.userForm.password === '') {
        this.myMessage('error', '请输入账号密码')
      } else {
        this.$axios.post('/userBack/userBackDengLu', this.userForm).then(res => {
          if (res.data.flag) {
            window.sessionStorage.setItem('token', res.data.obj.token)
            window.sessionStorage.setItem('userName', res.data.obj.userName)
            window.sessionStorage.setItem('roleId', res.data.obj.roleId)
            window.sessionStorage.setItem('id', res.data.obj.id)
            this.myMessage('success', '登录成功')
            this.$router.push('/HomeView')// 登录成功跳转到首页
          } else {
            this.myMessage('error', res.data.obj)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>

<style>
    .box{
      width:100%;
      height: 100%;
      margin: 0 auto;
      position: absolute;
    }
    .loginDengLu{
      width: 600px;
      height: 500px;
      margin: 0 auto;
      margin-top: 200px;
      background-color: white;
      border-radius: 4%;
      background-color: rgba(255,255,255,0.5);/* div透明 */
    }
    .boxCentre{
      margin: 0 auto;
      width: 64px;
    }
    .imgDiv{
      widows: 500px;
      height: 100px;
    }
    .img{
      width: 150px;
      height: 150px;
      margin-left: -38px;
      margin-top: 22px;
      /* margin-left: 550px; */
      /* margin-top: 50px; */
    }
    .boxBosom {
      width: 500px;
      height: 300px;
      background-color: rgb(255, 255, 255);
      /* background-image: linear-gradient(to right,#eea6a9, #fbcac2); */
            /* color: #fff; */
      border-radius: 4%;
      margin-left: -210px;
      margin-top: 50px;
      /* background-color: rgba(255,255,255,0.8); */
    }
    .boxBosom_box{
      width: 500px;
      height: 60px;
    }
    .boxBosom_box_box01{
      width: 60px;
      height: 60px;
      /* background: rgb(122, 215, 215); */
      float: left;
      margin-top: 60px;
    }
    .boxBosom_box_box01 p{
      margin-top: 9px;
      margin-left: 6px;
    }
    .boxBosom_box_box02{
      width: 420px;
      height: 60px;
      /* background-color: aquamarine; */
      float: left;
      margin-top: 60px;
    }
    .boxBosom_box_box02 form input{
      width: 420px;
    }
    .boxBosom_box_box03{
      width: 60px;
      height: 60px;
      /* background: rgb(122, 215, 215); */
      float: left;
    }
    .boxBosom_box_box03 p{
      margin-top: 9px;
      margin-left: 6px;
    }
    .boxBosom_box_box04{
      width: 420px;
      height: 60px;
      /* background-color: aquamarine; */
      float: left;
    }
    .boxBosom_box_box04 input{
      width: 420px;
    }
</style>
